<template>
  <div class="basic-settings">
    <el-form :model="formData" label-width="100px">
      <el-form-item label="审批名称">
        <el-input v-model="formData.name" placeholder="请输入审批名称" />
      </el-form-item>
      <el-form-item label="审批图标">
        <div class="icon-selector">
          <div class="selected-icon" @click="showIconDialog = true">
            <el-icon v-if="formData.icon">
              <component :is="formData.icon" />
            </el-icon>
            <span v-else>点击选择图标</span>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="审批分类">
        <el-select v-model="formData.category" placeholder="请选择分类">
          <el-option label="人事审批" value="hr" />
          <el-option label="财务审批" value="finance" />
          <el-option label="行政审批" value="admin" />
        </el-select>
      </el-form-item>
      <el-form-item label="审批说明">
        <el-input 
          v-model="formData.description" 
          type="textarea" 
          rows="4"
          placeholder="请输入审批说明"
        />
      </el-form-item>
    </el-form>

    <!-- 图标选择对话框 -->
    <el-dialog
      v-model="showIconDialog"
      title="选择图标"
      width="600px"
      append-to-body
    >
      <div class="icon-search">
        <el-input
          v-model="iconSearch"
          placeholder="搜索图标"
          prefix-icon="Search"
          clearable
        />
      </div>
      <div class="icon-list">
        <div
          v-for="icon in filteredIcons"
          :key="icon.name"
          class="icon-item"
          :class="{ active: formData.icon === icon.name }"
          @click="selectIcon(icon.name)"
        >
          <el-icon>
            <component :is="icon.name" />
          </el-icon>
          <span class="icon-name">{{ icon.label }}</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  modelValue: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['update:modelValue'])

const formData = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

const showIconDialog = ref(false)
const iconSearch = ref('')

// 图标列表
const iconList = [
  { name: 'Tickets', label: '工单' },
  { name: 'Document', label: '文档' },
  { name: 'Calendar', label: '日历' },
  { name: 'Money', label: '财务' },
  // ... 其他图标
]

// 过滤图标
const filteredIcons = computed(() => {
  if (!iconSearch.value) return iconList
  return iconList.filter(icon => 
    icon.label.toLowerCase().includes(iconSearch.value.toLowerCase()) ||
    icon.name.toLowerCase().includes(iconSearch.value.toLowerCase())
  )
})

// 选择图标
const selectIcon = (iconName) => {
  formData.value.icon = iconName
  showIconDialog.value = false
}
</script>

<style scoped>
/* ... 保持原有样式 ... */
</style> 